import React, { Component } from 'react'
import "./index.css"
import C from "../1_setState"

// 常规操作
/* export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h3>我是Parent组件</h3>
        <A></A>
      </div>
    )
  }
}

class A extends Component {
  state = {name: 'tom'}

  render() {
    return (
      <div className='a'>
        <h3>我是A组件</h3>
        <B></B>
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div className='b'>
        <h3>我是B组件</h3>
      </div>
    )
  }
} */

// renderProps
export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h3>我是Parent组件</h3>
        {/* <A render={(name) => <B name={name}/>}/> */}
        <A render={(name) => <C name={name}/>}/>
      </div>
    )
  }
}

class A extends Component {
  state = { name: 'tom' }

  render() {
    const {name} = this.state
    return (
      <div className='a'>
        <h3>我是A组件</h3>
        {/* {this.props.children} */}
        {this.props.render(name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    console.log("B-render")
    return (
      <div className='b'>
        <h3>我是B组件</h3>
      </div>
    )
  }
}